<template>
    <div class="app">
        <div v-if="isShowEdit">
            <input type="text" v-model="editValue" ref="inp" />
            <button>确认</button>
        </div>
        <div v-else>
            <span>{{ title }}</span>
            <button @click="edit">编辑</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: '大标题',
            isShowEdit: false,
            editValue: '',
        }
    },
    methods: {
        edit() {
            this.isShowEdit = true
            // 异步DOM渲染完成执行
            this.$nextTick(() => {
                this.$refs.inp.focus()
            })
        }
    },
}
</script>

<style></style>